<template>
    <div class="wrap1">
        <div class="wrapper">
            <Top :projectId="baojing"></Top>
            <div class="shu-moluai">
                <!-- <div class="sideba">
       
            <div class="right-sidebar">
              <div class="cewen-bar"> 厂区管理 </div>
              <div class="conn-bar" id="style-1">
                <div class="empty" v-if="departList.length == 0">
                  暂无部门
                </div>
                <div v-else>
                    <div
                      class="item-conn" v-for="(item, index) in departList" :key="index"
                      :class="index == currentIndex ? 'lie-bg1' : 'lie-bg'"
                      @click="goDepartEquip(index,item.deptId)" 
                    >
                      {{ item.name }}
                    </div>
                </div>
              </div>
              </div>
          </div> -->
                <!-- 左边结束 -->
                <div class="main-dianli-bottomgg" id="style-1">
                    <div class="wendutable">
                        区所选择:
                        <el-select v-model="value" placeholder="请选择" @change="qiehuan">
                            <el-option v-for="item in departList" :key="item.id" :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                        <div class="gather-time">采集时间：2024-11-14 20:47:00</div>
                    </div>
                    <!-- 一组结束 -->
                    <!-- <div class="empty" v-if="equipList.length == 0">
              暂无设备信息
            </div> -->
                    <div class="main-dianli-kuai" style="padding-top:25px" v-if="1">
                        <div class="dianli-peidian" v-for="(parentsItem, parentsIndex) in jfList"
                            :key="parentsIndex">
                            <div class="mainbg-tit diyige">
                                <div class="biaoti">贯通启动柜</div>
                                <div>电池电量：<b :style="'color:'+((i=parentsItem.dl)>=80?'green':i>=30?'yellow':'red')" >{{parentsItem.dl}}</b></div>
                            </div>
                            <div class="dianli-con" @click="">
                                    <div class="data-type">超声波数据</div>
                                    <div class="data-list" id="style-1">
                                        <div class="data-item">
                                            <div class="data-title">超声波告警等级</div>
                                            <div class="data-info">{{(i=parentsItem.swran)==0?'正常':i==1?'预警':i==2?'报警':''}}</div>
                                        </div>
                                        <div class="data-item">
                                            <div class="data-title">超声波放电类型</div>
                                            <div class="data-info">{{getfdtype(parentsItem.dtype)}}</div>
                                        </div>
                                        <div class="data-item">
                                            <div class="data-title">超声波信号峰值</div>
                                            <div class="data-info">28 dBm</div>
                                        </div>
                                        <div class="data-item">
                                            <div class="data-title">超声波信号均值</div>
                                            <div class="data-info">12 dBm</div>
                                        </div>
                                        <div class="data-item">
                                            <div class="data-title">超声波放电频次</div>
                                            <div class="data-info">367 次/s</div>
                                        </div>
                                        <div class="data-item">
                                            <div class="data-title">超声波50Hz相关性</div>
                                            <div class="data-info">2 %</div>
                                        </div>
                                        <div class="data-item">
                                            <div class="data-title">超声波100Hz相关性</div>
                                            <div class="data-info">5 %</div>
                                        </div>
                                    </div>
                                    <div  class="data-type">暂态数据</div>
                                    <div class="data-list" id="style-1">
                                        <div class="data-item">
                                            <div class="data-title">暂态告警等级</div>
                                            <div class="data-info">{{(i=parentsItem.swran)==0?'正常':i==1?'预警':i==2?'报警':''}}</div>
                                        </div>
                                        <div class="data-item">
                                            <div class="data-title">暂态放电类型</div>
                                            <div class="data-info">{{getfdtype(parentsItem.ztype)}}</div>
                                        </div>
                                        <div class="data-item">
                                            <div class="data-title">暂态信号峰值</div>
                                            <div class="data-info">1 dBm</div>
                                        </div>
                                        <div class="data-item">
                                            <div class="data-title">暂态信号均值</div>
                                            <div class="data-info">2 dBm</div>
                                        </div>
                                        <div class="data-item">
                                            <div class="data-title">暂态放电频次</div>
                                            <div class="data-info">2 次/s</div>
                                        </div>
                                        <div class="data-item">
                                            <div class="data-title">暂态50Hz相关性</div>
                                            <div class="data-info">0 %</div>
                                        </div>
                                        <div class="data-item">
                                            <div class="data-title">暂态100Hz相关性</div>
                                            <div class="data-info">0 %</div>
                                        </div>
                                    </div>
                            </div>
                        </div>
                    </div>
                    <!-- 右边模块一 -->
                </div>

                <!-- 右边结束 -->
            </div>
        </div>
    </div>
</template>
<script>
import Top from "../../components/common/top.vue";
export default {
    components: { Top },
    data() {
        return {
            baojing: 0, //不想
            currentIndex: 0,
            departList: [],
            pId: "",
            equipList: [],
            valTrue: true,
            value: "冠县",
            options: [],
            deptId: 3,
            jfList:[
                {
                    swran:1,
                    zwran:0,
                    dtype:0,
                    ztype:0,
                    dl:80
                },
                {
                    swran:0,
                    zwran:0,
                    dtype:0,
                    ztype:0,
                    dl:40
                },
                {
                    swran:0,
                    zwran:0,
                    dtype:0,
                    ztype:0,
                    dl:10
                }
            ],
        };
    },
    beforeDestroy() {
        clearInterval(this.tm2);
    },
    created() {
        this.getseletop();
        if (this.$route.query.pId) {
            this.pId = this.$route.query.pId;
        }
        if (this.$route.query.currentIndex) {
            this.currentIndex = this.$route.query.currentIndex;
        }
    },
    mounted() {
        this.roomsfun();
        this.warningfun();
        this.tm2 = setInterval(() => {
            this.warningfun();
        }, 30000);
    },
    methods: {
        // 根据数字获取放电类型
        getfdtype(data){
            let value=""
            switch (data) {
                case 0:
                    value="正常"
                    break;
                case 1:
                    value="尖端放电"
                    break;
                case 2:
                    value="悬浮放电"
                    break;
                case 3:
                    value="沿面放电"
                    break;
                case 4:
                    value="内部放电"
                    break;
                case 5:
                    value="颗粒放电"
                    break;
                case 6:
                    value="外部干扰"
                    break;
                case 7:
                    value="其他"
                    break;
                default:
                    value=""
                    break;
            }
            return value;
        },
        getseletop() {
            let userId=this.$auth.get("userid")
            this.$apiv.LoginGetDept({
                id:userId
            }).then(deptRes=>{
                console.log("根据用户id返回dept",deptRes);
                this.departList = deptRes.data;
                this.value=this.departList[0].name
                this.deptId=this.departList[0].id
                this.roomdetailsfun();
            })
            // this.$apiv.setsectlt({}).then(res => {
            //     console.log(res, "选择框");
            //     this.options = res.data;
            //     this.value = res.data[0].name;
            //     this.deptId = res.data[0].deptId;
            //     this.roomdetailsfun();
            // });
        },
        qiehuan(value) {
            console.log(value);
            this.deptId = value;
            this.roomdetailsfun();
            // if (value == '3') {
            //   this.valTrue = false;
            // } else {
            //   this.valTrue = true;
            // }
        },
        warningfun() {
            this.loginLoading = true;
            this.$apiv
                .warning({})
                .then(res => {
                    console.log("ggg", res.data);
                    if (res.data.is_ok == true) {
                        this.baojing = 1;
                    } else {
                        this.baojing = 0;
                    }
                    this.loginLoading = false;
                })
                .catch(res => {
                    this.loginLoading = false;
                });
        },
        roomsfun() {
            this.loginLoading = true;
            // this.$apiv
            //     .rooms({})
            //     .then(res => {
            //         this.departList = res.data;
            //         if (res.data.length > 0) {
            //             this.pId = res.data[0].deptId;
            //         }
            //         this.roomdetailsfun();
            //         this.loginLoading = false;
            //     })
            //     .catch(res => {
            //         this.loginLoading = false;
            //     });
            let userId=this.$auth.get("userid")
            this.$apiv.LoginGetDept({
                id:userId
            }).then(deptRes=>{
                console.log("根据用户id返回dept",deptRes);
                this.departList = deptRes.data;
                let data=deptRes.data;
                if (data.length > 0) {
                    this.pId = data[0].deptId;
                }
                this.roomdetailsfun();
                this.loginLoading = false;
            }).catch(res => {
                this.loginLoading = false;
            });
        },
        goDepartEquip(index, id) {
            this.currentIndex = index;
            this.pId = id;
            this.roomdetailsfun();
        },
        roomdetailsfun() {
            this.loginLoading = true;
            this.$apiv
                .roomdetails({ deptId: this.deptId })
                .then(res => {
                    console.log(res.data);
                    this.equipList = res.data;
                    this.loginLoading = false;
                })
                .catch(res => {
                    this.loginLoading = false;
                });
        },
        goDetails(id) {
            this.$router.push({
                path: "/ele_detail",
                query: {
                    pId: this.pId,
                    cabinetId: id,
                    currentIndex: this.currentIndex
                }
            });
        },
    }
};
</script>

<style scoped>
@import url("../../../static/zhuti.css");

.data-list {
    display: flex;
    flex-wrap: wrap;
}
.data-item{
    margin-left: 5px;
    margin-bottom: 5px;
    width: calc(25% - 5px);
    background-color: rgb(6, 45, 123);
    padding: 10px 0 10px 15px;
    border-radius: 5px;
    font-weight: 700;
    border-bottom: 2px solid rgb(0, 162, 255) ;
}
.data-title {
    color: chartreuse;
    margin-bottom: 10px;
}

.data-info {
    color: aqua;
}
.dianli-peidian {
    width: calc(50% - 10px);
    height: auto;
    padding-bottom: 10px;
}
.wendutable{
    position: relative;
  }
.gather-time{
    display: inline-block;
    float: right;
}
.data-type{
    color: whitesmoke;
    font-weight: 600;
    margin: 7px 5px;
}
</style>